<template>
  <div style="width: 1200px">
    <div style="width: 1200px" class="loglSerch">
      <div class="shopLogo" style="width: 250px">
        <img src="../views/imgs/logo2.jpg" alt="" srcset="" />
      </div>

      <div class="shopInput" style="width: 400px">
        <el-input v-model="input" placeholder="请输入内容"></el-input>
      </div>
      <div class="shopSerch">
        <el-button type="primary" icon="el-icon-search">搜索</el-button>
      </div>

      <div class="shopLink">
        <el-link href="/classifyGoods" target="blank" class="Link">男装</el-link>
        <el-link href="/classifyGoods" target="blank" class="Link">女装</el-link>
        <el-link href="/classifyGoods" target="blank" class="Link">电子产品</el-link>
        <el-link href="/classifyGoods" target="blank" class="Link">食物</el-link>
      </div>
    </div>

    <div class="shopMain" style="width: 1200px; background-color: white">
      <div class="Cascader">
        <table class="CascaderC">
          <tr>
            <td @mouseover="openList" @mouseout="overList">女装</td>
          </tr>
          <tr>
            <td @mouseover="openList2" @mouseout="overList2">男装</td>
          </tr>
          <tr>
            <td @mouseover="openList3" @mouseout="overList3">电子产品</td>
          </tr>
          <tr>
            <td @mouseover="openList4" @mouseout="overList4">零食</td>
          </tr>
        </table>
      </div>

      <div class="Rotationhart">
        <el-carousel
          :interval="5000"
          arrow="always"
          style="height: 300px; width: 1103px"
        >
          <el-carousel-item v-for="item in 4" :key="item">
            <h3>{{ item }}</h3>
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>

    <div @mouseover="openList" @mouseout="overList">
      <el-card id="classify1">
        <el-scrollbar style="height: 300px; width: 600px">
          <table>
            <span>上装</span>
            <tr>
              <td><el-button type="text">T恤</el-button></td>
              <td><el-button type="text">衬衫</el-button></td>
              <td><el-button type="text">毛衣</el-button></td>
              <td><el-button type="text">马甲</el-button></td>
            </tr>
            <span>潮流趋势</span>
            <tr>
              <td><el-button type="text">小黑裙</el-button></td>
              <td><el-button type="text">芭比裤</el-button></td>
              <td><el-button type="text">毛衣外套</el-button></td>
              <td><el-button type="text">T恤</el-button></td>
              <td><el-button type="text">阔腿神裤</el-button></td>
              <td><el-button type="text">宝藏羊毛</el-button></td>
            </tr>
          </table>
        </el-scrollbar>
      </el-card>
    </div>
    <div @mouseover="openList2" @mouseout="overList2">
      <el-card id="classify2">
        <el-scrollbar style="height: 300px; width: 600px">
          <table>
            <span style="margin-top:-100px">上装</span>
            <tr>
              <td><el-button type="text">T恤</el-button></td>
              <td><el-button type="text">衬衫</el-button></td>
              <td><el-button type="text">卫衣</el-button></td>
              <td><el-button type="text">短外套</el-button></td>
              <td><el-button type="text">羽绒服</el-button></td>
              <td><el-button type="text">风衣</el-button></td>
              <td><el-button type="text">皮衣</el-button></td>
            </tr>
            <span>裤子</span>
            <tr>
              <td><el-button type="text">工装裤</el-button></td>
              <td><el-button type="text">休闲裤</el-button></td>
              <td><el-button type="text">工装短裤</el-button></td>
              <td><el-button type="text">休闲短裤</el-button></td>
              <td><el-button type="text">牛仔裤</el-button></td>
              <td><el-button type="text">牛仔短裤</el-button></td>
            </tr>
          </table>
        </el-scrollbar>
      </el-card>
    </div>
    <div @mouseover="openList3" @mouseout="overList3">
      <el-card id="classify3">
        <el-scrollbar style="height: 300px; width: 600px">
          <table>
            <span>Vivo手机</span>
            <tr>
              <td><el-button type="text">VivoIQOONeo1</el-button></td>
              <td><el-button type="text">VivoIQOONeo2</el-button></td>
              <td><el-button type="text">VivoIQOONeo3</el-button></td>
              <td><el-button type="text">VivoIQOONeo4</el-button></td>
              <td><el-button type="text">VivoIQOONeo5</el-button></td>
            </tr>
            <span>手机配件</span>
            <tr>
              <td><el-button type="text">手机壳</el-button></td>
              <td><el-button type="text">手机贴膜</el-button></td>
              <td><el-button type="text">手机耳机</el-button></td>
              <td><el-button type="text">数据线</el-button></td>
              <td><el-button type="text">充电宝</el-button></td>
              <td><el-button type="text">手机支架</el-button></td>
            </tr>
            <tr>
              <td><el-button type="text">防尘塞</el-button></td>
              <td><el-button type="text">手机挂件</el-button></td>
              <td><el-button type="text">手机充电器</el-button></td>
              <td><el-button type="text">车载支架</el-button></td>
            </tr>
            <span>电脑笔记本</span>
            <tr>
              <td><el-button type="text">鼠标键盘</el-button></td>
              <td><el-button type="text">显示器</el-button></td>
              <td><el-button type="text">平板电脑</el-button></td>
              <td><el-button type="text">整体一体机</el-button></td>
            </tr>
            <span>联想笔记本</span>
            <tr>
              <td><el-button type="text">联想小新潮</el-button></td>
              <td><el-button type="text">联想拯救者</el-button></td>
            </tr>
          </table>
        </el-scrollbar>
      </el-card>
    </div>
    <div @mouseover="openList4" @mouseout="overList4">
      <el-card id="classify4">
        <el-scrollbar style="height: 300px; width: 600px">
          <table>
            <span>零食</span>
            <tr>
              <td><el-button type="text">儿童零食</el-button></td>
              <td><el-button type="text">网红Ip</el-button></td>
              <td><el-button type="text">零食大礼包</el-button></td>
              <td><el-button type="text">趣味食玩</el-button></td>
            </tr>
          </table>
        </el-scrollbar>
      </el-card>
    </div>

    <div class="youhaohuo" style="width: 1200px; background-color: white">
      <h2 style="margin-left: 90px">精选好货 <el-tag>全名口碑</el-tag></h2>

      <el-row>
        <el-col
          :span="8"
          v-for="(o, index) in 5"
          :key="o"
          :offset="index > 0 ? 2 : 0"
        >
          <el-card
            :body-style="{ padding: '0px' }"
            shadow="hover"
            style="width: 200px; height: 265px"
          >
            <img
              src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
              class="image"
            />
            <div style="panding: 0px">
              <el-button type="text" class="button" @click="gotoDetails">点我购买</el-button>
              <div class="bottom clearfix">
                <span>￥1220.99</span>
                <br>
                <span>好吃的汉堡</span>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <div
      class="PopularGoods"
      style="width: 1202px; height: 130px; background-color: white"
    >
      <div class="PopularGoods1">
        <img src="../views/imgs/1.webp" alt="" />
      </div>
      <div class="PopularGoods2">
        <img src="../views/imgs/2.webp" alt="" />
      </div>
      <div class="PopularGoods3">
        <img src="../views/imgs/3.webp" alt="" />
      </div>
    </div>

    <div class="GuessULike" style="width: 1200px; background-color: white">
      <h2 style="margin-left: 90px">
        猜你喜欢 <el-tag style="color: OrangeRed">个性推荐</el-tag>
      </h2>

      <el-row>
        <el-col
          :span="8"
          v-for="(o, index) in 10"
          :key="o"
          :offset="index > 0 ? 2 : 0"
        >
          <el-card
            :body-style="{ padding: '0px' }"
            shadow="hover"
            style="width: 200px; height: 265px"
          >
            <img
              src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
              class="image"
            />
            <div style="panding: 0px">
              <el-button type="text" class="button" @click="gotoDetails">点我购买</el-button>
              <div class="bottom clearfix">
                <span>￥1220.99</span>
                <br>
                <span>好吃的汉堡</span>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      input: "",
    };
  },
  methods: {
    handleChange(value) {
      console.log(value);
    },
    overList() {
      var list = document.getElementById("classify1");
      list.style.display = "none";
    },
    openList() {
      var list = document.getElementById("classify1");
      list.style.display = "block";
    },

    overList2() {
      var list = document.getElementById("classify2");
      list.style.display = "none";
    },
    openList2() {
      var list = document.getElementById("classify2");
      list.style.display = "block";
    },

    overList3() {
      var list = document.getElementById("classify3");
      list.style.display = "none";
    },
    openList3() {
      var list = document.getElementById("classify3");
      list.style.display = "block";
    },

    overList4() {
      var list = document.getElementById("classify4");
      list.style.display = "none";
    },
    openList4() {
      var list = document.getElementById("classify4");
      list.style.display = "block";
    },
    gotoDetails(){
      this.$router.push('/details')
    },
  },
};
</script>

<style scoped>
.shopLogo {
  margin-left: 250px;
}
.shopInput {
  margin-left: 600px;
  float: left;
  margin-top: -65px;
}
.shopSerch {
  margin-left: 1010px;
  margin-top: -65px;
}
.shopLink {
  margin-top: 55px;
  margin-left: 600px;
  color: black;
}
.Link {
  margin-top: -110px;
  margin-left: 40px;
}
.shopMain {
  margin-left: 100px;
  margin-top: 10px;
}
.loglSerch {
  background-color: #cccccc;
  margin-left: 100px;
}
/* .shopCascade {
  margin-top: 100px;
} */
.Cascader {
  padding: 0px;
  margin-top: 100px;
}
#classify1 {
  width: 600px;
  height: 300px;
  position: absolute;
  left: 187px;
  top: 212px;
  z-index: 10000;
  display: none;
}
#classify2 {
  width: 600px;
  height: 300px;
  /* background-color: pink; */
  position: absolute;
  left: 187px;
  top: 212px;
  z-index: 10000;
  display: none;
}
#classify3 {
  width: 600px;
  height: 300px;
  /* background-color: pink; */
  position: absolute;
  left: 187px;
  top: 212px;
  z-index: 10000;
  display: none;
}
#classify4 {
  width: 600px;
  height: 300px;
  /* background-color: pink; */
  position: absolute;
  left: 187px;
  top: 212px;
  z-index: 10000;
  display: none;
}
.CascaderC {
  position: relative;
}
.classify1 td {
  margin-left: 5px;
  margin-top: -5px;
}

/* 走马灯 */
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.Rotationhart {
  margin-left: 97px;
  margin-top: -200px;
}

.youhaohuo {
  margin-left: 30px;
  margin-top: 50px;
}
.el-card__body {
  width: 200px;
  height: 180px;
}
.image {
  width: 200px;
  height: 180px;
}
.el-col-8 {
  width: 12.5%;
  margin-top: 2%;
}

.GuessULike {
  margin-left: 30px;
  margin-top: 50px;
}

.el-card:hover {
  margin-top: -5px;
}
.el-row {
  margin-bottom: 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
}
.el-col {
  border-radius: 4px;
  align-items: stretch;
  margin-bottom: 40px;
  margin-left: 90px;
}
/*此处是为了将原有的横向滚动条隐藏，原本的滚动条很丑*/
.el-scrollbar__wrap {
  overflow-x: hidden;
}

.PopularGoods {
  margin-left: 100px;
}
.PopularGoods1 {
  width: 375px;
  height: 130px;
  float: left;
}
.PopularGoods2 {
  width: 375px;
  height: 130px;
  float: left;
  margin-left: 38px;
}
.PopularGoods3 {
  width: 375px;
  height: 130px;
  float: left;
  margin-left: 38px;
}
.PopularGoods1:hover {
  margin-top: -5px;
}
.PopularGoods2:hover {
  margin-top: -5px;
}
.PopularGoods3:hover {
  margin-top: -5px;
}
img {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>